<template>
  <Select class="font-family-container" v-model="baseAttr.fontFamily" @on-change="changeFontFamily">
    <Option v-for="item in fontsList" :value="item.name" :key="`font-${item.name}`">
      <div class="font-item" :style="`background-image:url('${item.img}');`">
        {{ !item.img ? item : '' }}
        <!-- 解决无法选中问题 -->
        <span style="display: none">{{ item.name }}</span>
      </div>
    </Option>
  </Select>
  <Tooltip placement="top" content="字号" theme="dark">
    <InputNumber
      class="font-size-container"
      v-model="baseAttr.fontSize"
      @on-change="(value) => changeCommon('fontSize', value)"
      :min="1"
    ></InputNumber>
  </Tooltip>

  <Tooltip placement="top" content="行高" theme="dark">
    <InputNumber
      class="line-height-container"
      v-model="baseAttr.lineHeight"
      @on-change="(value) => changeCommon('lineHeight', value)"
      :step="0.1"
    ></InputNumber>
  </Tooltip>
  <Tooltip placement="top" content="间距" theme="dark">
    <InputNumber
      class="space-container"
      v-model="baseAttr.charSpacing"
      @on-change="(value) => changeCommon('charSpacing', value)"
    ></InputNumber>
  </Tooltip>
</template>

<script setup name="Flip">
import useSelect from '@/hooks/select';
import InputNumber from '@/components/inputNumber';

const update = getCurrentInstance();
const fontsList = ref([]);
// 文字元素
const textType = ['i-text', 'textbox', 'text'];
const { canvasEditor, isMatchType } = useSelect(textType);

// 属性值
const baseAttr = reactive({
  fontSize: 0,
  fontFamily: '',
  lineHeight: 0,
  charSpacing: 0,
  textBackgroundColor: '#fff',
});

canvasEditor.getFontList().then((list) => {
  fontsList.value = list;
});

// 属性获取
const getObjectAttr = (e) => {
  const activeObject = canvasEditor.canvas.getActiveObject();
  // 不是当前obj，跳过
  if (e && e.target && e.target !== activeObject) return;
  if (activeObject && isMatchType) {
    baseAttr.fontSize = activeObject.get('fontSize');
    baseAttr.fontFamily = activeObject.get('fontFamily');
    baseAttr.lineHeight = activeObject.get('lineHeight');
    baseAttr.charSpacing = activeObject.get('charSpacing');
    baseAttr.textBackgroundColor = activeObject.get('textBackgroundColor');
  }
};

const changeFontFamily = async (fontName) => {
  if (!fontName) return;
  canvasEditor.loadFont(fontName).finally(() => console.log('结束'));
};

// 通用属性改变
const changeCommon = (key, value) => {
  const activeObject = canvasEditor.canvas.getActiveObjects()[0];
  if (activeObject) {
    activeObject && activeObject.set(key, value);
    canvasEditor.canvas.renderAll();
  }
};

const selectCancel = () => {
  update?.proxy?.$forceUpdate();
};

onMounted(() => {
  // 获取字体数据
  getObjectAttr();
  canvasEditor.on('selectCancel', selectCancel);
  canvasEditor.on('selectOne', getObjectAttr);
  canvasEditor.canvas.on('object:modified', getObjectAttr);
});

onBeforeUnmount(() => {
  canvasEditor.off('selectCancel', selectCancel);
  canvasEditor.off('selectOne', getObjectAttr);
  canvasEditor.canvas.off('object:modified', getObjectAttr);
});
</script>

<style scoped lang="less">
.font-family-container {
  width: 120px;
}
.font-item {
  height: 40px;
  width: 280px;
  background-size: auto 28px;
  background-repeat: no-repeat;
}
.font-size-container,
.line-height-container,
.space-container {
  width: 50px;
}
</style>
